import { AppUser } from "@src/services/v1_client";
import {
  CheckBox,
  FcCheckBox,
  FcCheckboxProps,
  FcForm,
  FcFormItem,
  FcFormItemLayout,
  FcFormItemLayoutTemplateType,
  FcInput,
  TextBox,
} from "solid-fire-controls";

const horizontalTemplate: FcFormItemLayoutTemplateType = ({
  label,
  field,
  classList,
}) => {
  return (
    <div class="row mb-3" classList={classList}>
      <label class="col-sm-2 col-form-label">{label}</label>
      <div class="col-sm-10">{field}</div>
    </div>
  );
};

const UserDetail = (props: { user?: AppUser; disabled?: boolean }) => {
  return (
    <FcForm
      onSubmit={(v) => console.log("submit!", v)}
      value={props.user}
      initialValue={new AppUser()}
      disabled={props.disabled}
      readonly
    >
      <FcFormItemLayout classList={["mb-3"]}>
        <FcFormItem label={"Id"} name={"id"} control={TextBox}>
        </FcFormItem>
        <FcFormItem label={"User Name"} name={"userName"} control={TextBox}>
        </FcFormItem>
        <FcFormItem label={"Email"} name={"email"} control={TextBox}>
        </FcFormItem>
        <FcFormItem label={"Phone Number"} name={"phoneNumber"}>
        </FcFormItem>
        <FcFormItem
          label={"Two Factory Enabled"}
          name={"twoFactorEnabled"}
          control={(ctx: FcCheckboxProps) => <div class="d-flex h-100 flex-row align-items-center">
            <FcCheckBox {...ctx}></FcCheckBox>
          </div>}
          controlProps={{ classList: ['mt-0']}}
        >
        </FcFormItem>
        <FcFormItem
          label={"Lockout End"}
          name={"lockoutEnd"}
          controlProps={{ classList: ["mt-0"] }}
          control={(ctx: FcCheckboxProps) =>  <div class="d-flex h-100 flex-row align-items-center">
            <FcCheckBox {...ctx}></FcCheckBox>
          </div>}
        >
        </FcFormItem>
        <FcFormItem
          label={"Lockout Enabled"}
          layout={{ template: horizontalTemplate }}
          name={"lockoutEnabled"}
          controlProps={{ classList: ["mt-0"] }}
          control={(ctx: FcCheckboxProps) => {
            return <div class="d-flex h-100 flex-row align-items-center">
            <FcCheckBox {...ctx}></FcCheckBox>
          </div>
          }}
        >
        </FcFormItem>
        <FcFormItem
          label={"Access Failed Count"}
          name={"accessFailedCount"}
          controlProps={{
            type: "number",
          }}
          control={TextBox}
        >
        </FcFormItem>
      </FcFormItemLayout>
    </FcForm>
  );
};

export default UserDetail;
